<template>
    <div class="form">
        <el-form ref="form" :model="obj.data" label-width="80px">
            <el-form-item label="登录名" prop="uname" :rules="[formRulesMixin.notNull]">
                <el-input v-model="obj.data.uname" clearable autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="name" :rules="[formRulesMixin.notNull]">
                <el-input v-model="obj.data.name" clearable autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pass" :rules="[ { required: obj.data.id == 0, message: '密码不能为空'} ]" v-show="obj.data.id == 0">
                <el-input v-model="obj.data.pass" clearable autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="角色">
                <div class="checkboxgroup">
                    <el-checkbox v-for="(a,a_index) in obj.role" :key="a_index" :checked="compare(a)" @change="itemChange($event, a)">{{a.name}}</el-checkbox>
                </div>
            </el-form-item>
        </el-form>
        <div class="btns">
            <el-button @click="$emit('close')">取消</el-button>
            <el-button type="primary" @click="upData">提交</el-button>
        </div>
    </div>
</template>

<script setup>
    import { reactive, getCurrentInstance, computed } from 'vue'
    let { proxy } = getCurrentInstance()
    const emit = defineEmits(['init', 'close']) //此处要完全对应，采用固定的update:prop属性
    const props = defineProps({
        id: { type: Number, require: true, default: 0 },
    })

    let obj = reactive({
        data:{
            id: props.id,
            uname: "",
            name: "",
            pass: "",
            role: "",
            roles: [],
        },
        role:[]
    })

    let get = () => {
        return new Promise((resolve, reject) => {
            proxy.$ajax({
                url: '/manager/manageruser/get',
                data: { id: obj.data.id },
                bfLoading: true
            }).then(d => {
                resolve(d.msg)
            }).catch(e => {
                reject(e)
            })
        })
    }
    let role = () => {
        return new Promise((resolve, reject) => {
            proxy.$ajax({
                url: '/manager/role/list',
                data: { },
                bfLoading: true
            }).then(d => {
                resolve(d.msg.list)
            }).catch(e => {
                reject(e)
            })
        })
    }
    let init = async () => {
        if(obj.data.id > 0) {
            let userinfo = await get()
            obj.data = { ...obj.data, ...userinfo.user[0] }
            obj.data.roles = userinfo.role
        }
        obj.role = await role()
    }
    init()

    const compare = computed(() => {
        return (a) => {
            return obj.data.roles.some(t => t.role_id == a.role_id);
        };
    });
    let itemChange = (e,a) => {
        if(e){
            obj.data.roles.push(a)
        }else{
            obj.data.roles = obj.data.roles.filter(item => item.role_id !== a.role_id);
        }
    }

    let upData = () => {
        proxy.$refs['form'].validate(valid => {
            if (valid) {
                obj.data.role = obj.data.roles.map(t => t.role_id).join(",")
                proxy.$ajax({
                    url: '/manager/manageruser/design',
                    data: obj.data,
                    bfLoading: true
                }).then(data => {
                    // console.log(date)
                    if(data.success){
                        proxy.elMessageMixin(`管理员${obj.data.id > 0 ? '修改' : '添加'}成功`, 'success')
                        proxy.$emit('close')
                        proxy.$emit('init')
                    }else{
                        ElMessage({ message: data.err, type: 'error', duration: 2 * 1000 })
                    }
                }).catch(() => {})
            } else {
                return false
            }
        })
    }
</script>

<style scoped>
    .checkboxgroup { display: flex; }
</style>

